.usercenter {
	background: #ddd;

	.index-top {
		width: 100%;
		font-size: 1.625rem;
		justify-content: space-between;
		background: #265BCD;
		color: #fff;
		height: 6rem;
		line-height: 6.5rem;
		display: flex;

		h1 {
			font-size: 1.625rem;
			margin-right: 1rem;
		}

		p {
			font-size: 2.25rem;
			margin-left: 45%;
		}
	}

	.uc-head {
		min-height: 20rem;
		position: relative;

		>img {
			width: 100%;
			display: block;
		}

		>a {
			position: absolute;

			font-size: 1.75rem;
			color: #fccc5b;
			cursor: pointer;

			&.link-security {
				right: 1.5rem;
				top: 1rem;
			}

			&.link-follow {
				left: 1.5rem;
				top: 2rem;
			}
		}

		>p {
			position: absolute;
			right: 1.5rem;
			top: 2.6rem;
			font-size: 1.75rem;
			line-height: 1.5rem;
			color: #fccc5b;
			cursor: pointer;

			img {
				height: 1.5rem;
				vertical-align: top;
				margin-left: 0.5rem;
			}
		}

		.uc-info-card {
			width: 100%;
			position: absolute;
			background: #265BCD;
			z-index: 2;
			left: 0;

			.uc-info-name {
				float: left;
				color: #fff;
				font-size: 2.25rem;
				font-weight: bold;
				flex-grow: 1;
				align-items: center;
				padding-left: 1.5rem;
			}

			.uc-info-card-top {
				padding: 1.875rem;
				// min-height: 8rem;
				display: flex;
				align-items: left;

				.uc-info-header {
					width: 6.1875rem;
					height: 6.1875rem;
					position: relative;

					img {
						width: 6.1875rem;
						height: 6.1875rem;
						border-radius: 50%;
					}
				}

				.uc-info-level {
					margin: auto 2rem;

					h3 {
						color: #fff;
						font-size: 1.875rem;
						height: 2.25rem;
						line-height: 2.25rem;
						margin-bottom: 1rem;
					}
				}

			}

			.uc-info-card-bottom {
				text-align: center;
				display: flex;
				height: 7.5rem;
				margin: 0 -1.5rem;
				margin-top: 2rem;

				.uc-info-amount {
					display: flex;
					border-right: solid .1rem #fff;

					h4 {
						margin: auto;
						margin-right: 0;
						font-size: 1.5rem;
						height: 1.25rem;
						color: #fff;

						span {
							display: inline-block;
						}

						img {
							height: 1.25rem;
							margin-right: 0.625rem;
							vertical-align: baseline;
						}
					}

					.amount-number {
						img {
							margin-right: 1rem;
						}

						display: flex;
						margin: auto;
						font-size: 2.25rem;
						color: #fff;
					}
				}

				>div {
					border-top: solid .1rem #fff;
					flex: 1;
					padding: 0 1.5rem;
				}

				img {
					display: block;
					margin: 0 auto;
					height: 3rem;
					margin-bottom: 0.5rem;
				}

				span {
					color: #fff;
					font-size: 1.5rem;
					line-height: 1.8rem;
					display: block;
				}
			}
		}
	}

	.list {
		background: #fff;

		ul {
			padding-left: 3.125rem;

			li {
				padding: 2.8125rem 0;
				display: flex;
				justify-content: space-between;
				list-style-type: none;
				border-bottom: solid 1px #ddd;

				div {

					width: 100%;
					padding-left: 2rem;

				}

				img {
					height: 2.9375rem;
				}

				p {
					font-size: 2.125rem;
					color: #333;
				}

				h4 {
					color: #A7A7AF;
					font-size: 2rem;
					margin-right: 2rem;
				}
			}
		}
	}

	.uc-info {
		padding: 3rem 1.5rem;
		background: #000;

		.uc-info-address {
			>div {
				background: linear-gradient(0deg, rgba(247, 206, 112, 1), rgba(255, 221, 145, 1));
				box-shadow: -0.375rem 0px 1rem 0px rgba(135, 135, 135, 0.1);
				border-radius: 0.75rem;
				padding: 2.5rem 1.5rem;
				display: flex;
				justify-content: space-between;
				align-items: center;

				img {
					width: 2.8125rem;
					height: 2.6875rem;
					margin-right: 0.5rem;
				}

				p {
					font-size: 1.875rem;
					color: #333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				a {
					white-space: nowrap;
					color: #333;
					border-radius: 1.4rem;
					font-size: 1.875rem;
					padding: 0.1rem 0.5rem;
				}
			}
		}
	}

	.uc-list {
		.uc-list-head {
			font-size: 2.25rem;
			line-height: 5rem;
			display: flex;
			background: #000;
			padding-top: 1.5rem;

			a {
				display: block;
				width: 50%;
				text-align: center;
				color: #fccc5b;
				position: relative;
				font-weight: normal;

				&.active {
					color: #fccc5b;
					font-weight: bold;

					&:after {
						content: '';
						width: 3rem;
						height: 0.25rem;
						border-radius: 0.1rem;
						background: #fccc5b;
						position: absolute;
						left: 50%;
						bottom: 0;
						margin-left: -1.5rem;
					}
				}
			}
		}

		.uc-list-body {
			padding: 0 1.5rem;
		}
	}

	.zxkf {
		float: right;
		padding: 3rem;
		margin-bottom: 9rem;
		margin-top: 5rem;
		text-align: center;

		img {
			height: 3.0625rem;
		}

		p {
			color: #215CD2;
			font-size: 1.5rem;
		}
	}
}

.pay-sure-box {
    width: 90%;
    left: 5%;
    top: 50%;
    padding: 3rem;
    position: absolute;
    transform: translateY(-50%);
    background: #fff;
    color: #000;
    border-radius: 1rem;

    .icon-close {
      font-size: 4rem;
      color: #999;
      position: absolute;
      right: 1rem;
      top: 1rem;
      font-style: normal;
      line-height: 4rem;
      display: block;
      width: 4rem;
      height: 4rem;
      text-align: center;

      &:active {
        color: #265BCD;
      }
    }

    h3 {
      font-size: 2.4rem;
      margin-bottom: 1rem;
      margin-top: 2rem;
      text-align: center;
      font-weight: normal;
    }

    .user-amount {
      font-size: 3rem;
      color: #265BCD;
      text-align: center;
      margin: 2rem 0;
    }

    button.btn-primary {
      width: 40%;
      padding: 1.5rem 0;
    }

    button.btn-default {
      width: 40%;
      font-size: 2.25rem;
      padding: 1.5rem 0;
      line-height: 1;
      text-align: center;
      display: block;
      margin: 4rem auto 0 auto;
      border: none;
      background: #E6E6E6;
      border-radius: 3rem;
      color: #333;
    }

    p {
      font-size: 1.5rem;
      color: #333;
      margin-top: 1rem;
      text-align: center;
    }

    .btn-primary {
      font-size: 2.25rem;
      padding: 1.75rem 0;
      line-height: 1;
      text-align: center;
      display: block;
      width: 70%;
      margin: 4rem auto 0 auto;
      border: none;
      background: #265BCD;
      border-radius: 3rem;
      color: #fff;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: transparent;
    }
  }

button.btn-primary {
	width: 40%;
	padding: 1.5rem 0;
}

.btn-primary {
	font-size: 2.25rem;
	padding: 1.75rem 0;
	line-height: 1;
	text-align: center;
	display: block;
	width: 70%;
	margin: 4rem auto 0 auto;
	border: none;
	background: #FCCC5B;
	border-radius: 3rem;
	color: #333;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
}

button.btn-default {
	width: 40%;
	font-size: 2.25rem;
	padding: 1.5rem 0;
	line-height: 1;
	text-align: center;
	display: block;
	margin: 4rem auto 0 auto;
	border: none;
	background: #E6E6E6;
	border-radius: 3rem;
	color: #333;
}